<template>
  <el-card class="box-card">
    <!-- 表单区 -->
    <el-form
      class="elForm"
      ref="ruleForm"
      :rules="rules"
      :model="goodsmng"
      label-width="80px"
      status-icon
    >
      <!-- 商品名称 -->
      <el-form-item
        label="商品名称"
        prop="goodsName"
      >
        <el-input
          v-model="goodsmng.goodsName"
          :disabled="op == 'query'"
          style="width:30%;"
        ></el-input>
      </el-form-item>
      <!-- 商品价格 -->
      <el-form-item
        label="商品价格"
        prop="goodsPrice"
      >
        <el-input-number
          style="width:30%;"
          v-model.number="goodsmng.goodsPrice"
          :disabled="op == 'query'"
          :min="1"
          :max="500"
          label="描述文字"
        ></el-input-number>
      </el-form-item>
      <!-- 商品库存 -->
      <el-form-item
        label="商品库存"
        prop="goodsStock"
      >
        <el-input-number
          style="width:30%;"
          v-model.number="goodsmng.goodsStock"
          :disabled="op == 'query'"
          :min="1"
          :max="5000"
          label="描述文字"
        ></el-input-number>

      </el-form-item>
      <!-- 商品类型 -->
      <el-form-item
        label="商品类型"
        prop="goodsType"
      >
        <el-select
          v-model="goodsmng.goodsType"
          :disabled="op == 'query'"
          placeholder="请选择"
          style="width:30%;"
        >
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 商品图片 -->
      <el-form-item
        label="商品图片"
        v-show="op == 'add'"
      >
        <new-image-upload @get-img-list="getImgList($event)"></new-image-upload>
      </el-form-item>

      <!-- 商品图片展示 -->
      <el-form-item
        label="商品图片"
        v-show="op != 'add'"
      >
        <div
          class="photos"
          v-show="op != 'add'"
        >
          <photo-card
            v-for="item in goodsmng.goodsImgs"
            :key="item"
            :img="item"
            class="photo"
            link="#"
          ></photo-card>
        </div>
      </el-form-item>

      <!-- 添加或修改 按钮区 -->
      <el-form-item v-if="op != 'query'">
        <el-button
          type="primary"
          @click="onSubmit"
        >提交</el-button>
        <el-button @click="$router.go(-1)">取消并且返回</el-button>
      </el-form-item>

      <!-- 查询 按钮区 -->
      <el-form-item v-else>
        <el-button @click="$router.go(-1)">返回列表</el-button>
      </el-form-item>
    </el-form>

  </el-card>
</template>

<script>
import { addGoodsList, getGoodsTypes, getGoodsList, updateGoodsList } from '@/api/goods'
import { addIncomePay } from '@/api/incomePay'
import photoCard from '@/components/imageShow/photoCard'
import newImageUpload from '@/components/newImageUpload'
export default {
  props: {
    id: {
      type: String
    },
    op: {
      type: String
    }
  },
  data () {
    return {
      goodsmngTmp: {
        id: "",
        goodsName: "",
        goodsPrice: "",
        goodsStock: "",
        goodsType: "",
        goodsContent: "",
        goodsImgs: []
      },
      goodsmng: {
        id: "",
        goodsName: "",
        goodsPrice: "",
        goodsStock: "",
        goodsType: "",
        goodsContent: "",
        goodsImgs: []
      },
      rules: {
        goodsName: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        goodsPrice: [
          { required: true, message: '请录入商品单价', trigger: 'blur' },
          { type: 'number', message: '输入值必须是数字', trigger: 'blur' }
        ],
        goodsStock: [
          { required: true, message: '请录入商品库存', trigger: 'blur' },
          { type: 'number', message: '输入值必须是数字', trigger: 'blur' }
        ],
        goodsType: [
          { required: true, message: '请选择商品类型', trigger: 'change' }
        ]
      },
      options: [] // 下拉列表
    }
  },
  async created () {
    if (this.id != 'noquery') {
      // 查询商品
      const resultData = await getGoodsList('?id=' + this.id)
      this.goodsmng = resultData[0]
      // 记录商品副本
      // this.goodsmngTmp = resultData[0]
      this.goodsmngTmp = deepCopy(resultData[0])
    } else {
      this.goodsmng.id = Date.now()
    }
    // 赋值 下拉框选项
    this.options = await getGoodsTypes();
  },
  methods: {
    // 提交事件
    async onSubmit () {
      let message = '没有该操作'
      let type = 'warning'
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          switch (this.op) {
            case 'add':
              // 添加商品
              await addGoodsList(this.goodsmng)
              // 记录订单
              await addIncomePay({
                payment: (this.goodsmng.goodsStock - this.goodsmngTmp.goodsStock) * this.goodsmng.goodsPrice,
                info: '新增加了商品' + this.goodsmng.goodsName
              })
              type = 'success'
              message = '新增商品成功'
              this.$router.push('/goodsMng')
              break;
            case 'edit':
              // 修改商品
              await updateGoodsList(this.goodsmng)
              // 记录订单
              if (this.goodsmng.goodsStock > this.goodsmngTmp.goodsStock) {
                await addIncomePay({
                  payment: (this.goodsmng.goodsStock - this.goodsmngTmp.goodsStock) * this.goodsmng.goodsPrice,
                  info: `增加了${this.goodsmng.goodsName}的商品库存` 
                })
              } else if (this.goodsmng.goodsStock < this.goodsmngTmp.goodsStock) {
                await addIncomePay({
                  income: (this.goodsmngTmp.goodsStock - this.goodsmng.goodsStock) * this.goodsmng.goodsPrice,
                  info: `减少了${this.goodsmng.goodsName}的商品库存`
                })
              }
              message = '修改商品成功'
              type = 'success'
              this.$router.push('/goodsMng')
              break
          }
          this.$message({
            message,
            type
          });
        } else {
          return false;
        }
      });
    },
    /* 
      图片上传成功后调用
    */
    getImgList (data) {
      this.goodsmng.goodsImgs.push(data.thisData.url)
    }
  },
  components: {
    photoCard,
    newImageUpload
  }
}

/* 
  深拷贝对象
*/
function deepCopy (obj) {
  return JSON.parse( JSON.stringify(obj) )
}

</script>

<style scoped lang="scss">
.box-card {
  margin: 30px;
  .elForm {
    margin-left: 100px;
  }
  .photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, 150px);
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 700px;
    margin-bottom: 50px;
  }
}
</style>
